<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('摄像头识别列表')" />
</head>
<body class="gray-bg">
<div>
    <input id="play" type="button" value="开始播放"/>
    <input id="pause" type="button" value="暂停播放"/>
    <input id="continue" type="button" value="继续播放"/>
    <input id="stop" type="button" value="停止播放"/>
    <input id="capture" type="button" value="抓图"/>
    <input id="capture2" type="button" value="抓图"/>
    <br/>
    <canvas id="testCanvas" style="background-color:#000;width:600px!important;height:300px;"></canvas>
    <div>
        <video id="testVideo" style="background-color:#000;width:600px!important;height:300px;"></video>
    </div>
</div>
</body>
<script>
    var player = null;
    var canvas = document.getElementById('testCanvas');
    var video = document.getElementById('testVideo');
    document.getElementById('stop').onclick = function(){
        player && player.close();
    }
    document.getElementById('pause').onclick = function(){
        player && player.pause();
    }
    document.getElementById('continue').onclick = function(){
        player && player.play();
    }

    document.getElementById('capture').onclick = function(){
        console.log("*******");
        player && player.capture();
    }
    document.getElementById('capture2').onclick = function(){
        player && player.capture2();
    }
    document.getElementById('play').onclick = function(){
        var options = {
            wsURL: 'ws://192.168.1.108/rtspoverwebsocket',
            rtspURL: 'rtsp://192.168.1.108/cam/realmonitor?channel=1&subtype=0&proto=Private3',
            username: 'admin',
            password: 'admin123'
        };
        player = new PlayerControl(options);
        player.on('WorkerReady', function(){
            player.connect();
        });
        player.on('DecodeStart', function(rs){
            console.log('开始解码');
            console.log(rs);

        });
        player.on('PlayStart', function(rs){
            console.log('开始播放');
            console.log(rs);
        });
        player.on('Error', function(rs){
            console.log('发生错误');
            console.log(rs);
        });
        player.on('FileOver', function(rs){
            console.log('回放播放完成');
            console.log(rs);
        });
        player.on('MSEResolutionChanged', function(rs){
            console.log('分辨率改变');
            console.log(rs);
        });
        player.on('FrameTypeChange', function(rs){
            console.log('编码模式改变');
            console.log(rs);
        });
        player.on('audioChange', function(rs){
            console.log('音频编码改变');
            console.log(rs);
        });
        player.init(canvas, video);
    }

</script>
</html>